<template>
  <view class="ziwei-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="grid-container" v-if="gongPan.length">
      <!-- 宫格的每个单元格 -->
      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[6].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[6].ziweixingSihua"
          >{{ gongPan && gongPan[6].ziweixingSihua }}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[6].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[6].tianfuxingSihua"
          >{{ gongPan && gongPan[6].tianfuxingSihua }}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].monthxing }}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].hourxing }}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].yearganxing }}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].yearzhixing }}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].qitaxing }}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[6].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[6].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[6].daxian }}</text>
          <text class="text-item">{{ gongPan && gongPan[6].xiaoxian }}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[6].minggong }}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[6].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[7].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[7].ziweixingSihua"
          >{{ gongPan && gongPan[7].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[7].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[7].tianfuxingSihua"
          >{{ gongPan && gongPan[7].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[7].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[7].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[7].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[7].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[7].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[7].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[8].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[8].ziweixingSihua"
          >{{ gongPan && gongPan[8].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[8].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[8].tianfuxingSihua"
          >{{ gongPan && gongPan[8].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[8].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[8].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[8].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[8].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[8].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[8].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[9].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[9].ziweixingSihua"
          >{{ gongPan && gongPan[9].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[9].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[9].tianfuxingSihua"
          >{{ gongPan && gongPan[9].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[9].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[9].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[9].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[9].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[9].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[9].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[5].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[5].ziweixingSihua"
          >{{ gongPan && gongPan[5].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[5].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[5].tianfuxingSihua"
          >{{ gongPan && gongPan[5].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[5].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[5].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[5].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[5].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[5].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[5].yinshou
            }}
          </text>
        </view>
      </view>

      <!-- 隐藏中间的格子 -->
      <view class="grid-item grid-item-hidden" style="visibility: hidden"></view>
      <view class="grid-item" style="visibility: hidden"></view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[10].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[10].ziweixingSihua"
          >{{ gongPan && gongPan[10].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[10].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[10].tianfuxingSihua"
          >{{ gongPan && gongPan[10].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[10].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[10].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[10].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[10].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[10].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[10].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[4].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[4].ziweixingSihua"
          >{{ gongPan && gongPan[4].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[4].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[4].tianfuxingSihua"
          >{{ gongPan && gongPan[4].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[4].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[4].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[4].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[4].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[4].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[4].yinshou
            }}
          </text>
        </view>
      </view>

      <!-- 隐藏中间的格子 -->
      <view class="grid-item" style="visibility: hidden"></view>
      <view class="grid-item" style="visibility: hidden"></view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[11].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[11].ziweixingSihua"
          >{{ gongPan && gongPan[11].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[11].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[11].tianfuxingSihua"
          >{{ gongPan && gongPan[11].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[11].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[11].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[11].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[11].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[11].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[11].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[3].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[3].ziweixingSihua"
          >{{ gongPan && gongPan[3].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[3].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[3].tianfuxingSihua"
          >{{ gongPan && gongPan[3].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[3].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[3].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[3].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[3].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[3].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[3].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[2].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[2].ziweixingSihua"
          >{{ gongPan && gongPan[2].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[2].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[2].tianfuxingSihua"
          >{{ gongPan && gongPan[2].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[2].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[2].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[2].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[2].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[2].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[2].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[1].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[1].ziweixingSihua"
          >{{ gongPan && gongPan[1].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[1].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[1].tianfuxingSihua"
          >{{ gongPan && gongPan[1].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[1].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[1].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[1].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[1].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[1].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[1].yinshou
            }}
          </text>
        </view>
      </view>
      <view class="grid-item">
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[0].ziweixing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].ziweixingXingyao
            }}
          </text>
          <text
            class="text-item text-item-3"
            v-if="gongPan && gongPan[0].ziweixingSihua"
          >{{ gongPan && gongPan[0].ziweixingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-1">
            {{
            gongPan && gongPan[0].tianfuxing
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].tianfuxingXingyao
            }}
          </text>
          <text
            class="text-item"
            v-if="gongPan && gongPan[0].tianfuxingSihua"
          >{{ gongPan && gongPan[0].tianfuxingSihua}}</text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].monthxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].monthxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].monthxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].hourxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].hourxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].hourxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].yearganxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].yearganxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].yearganxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].yearzhixing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].yearzhixingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].yearzhixingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].qitaxing}}</text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].qitaxingXingyao
            }}
          </text>
          <text class="text-item">
            {{
            gongPan && gongPan[0].qitaxingSihua
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[0].boshi
            }}
          </text>
        </view>
        <view class="item">
          <text class="text-item">{{ gongPan && gongPan[0].daxian}}</text>
          <text class="text-item">{{ gongPan && gongPan[0].xiaoxian}}</text>
        </view>
        <view class="item">
          <text class="text-item text-item-4">{{ gongPan && gongPan[0].minggong}}</text>
          <text class="text-item text-item-5">
            {{
            gongPan && gongPan[0].yinshou
            }}
          </text>
        </view>
      </view>

      <view class="img">
        <view class="img-item">
          <text style="margin-right:8px">姓名:{{ baseInfo.name }}</text>
          <text>性别:{{ baseInfo.sex }}</text>
        </view>
        <view class="img-item">阳历:{{ baseInfo.gongli }}</view>
        <view class="img-item">农历:{{ baseInfo.nongli }}</view>
        <view class="img-item">
          命四化：
          <text class="text-panlei">{{ baseInfo.mingsihua }}</text>
        </view>
        <view class="img-item">
          <tui-row justify="center">
            <tui-col :span="12">
              <view class="tui-col__demo tui-yellow">
                命宫在
                <text class="text-panlei">{{ baseInfo.minggong }}</text>
              </view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">
                身宫在
                <text class="text-panlei">{{ baseInfo.shengong }}</text>
              </view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-yellow">
                子斗在
                <text class="text-panlei">{{ baseInfo.zidou }}</text>
              </view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">
                流斗在
                <text class="text-panlei">{{ baseInfo.liudou }}</text>
              </view>
            </tui-col>
          </tui-row>

          <!-- <view>命宫在:{{ baseInfo.mingsihua }}</view>
          <view>身宫在化:{{ baseInfo.mingsihua }}</view>-->
        </view>

        <view class="img-item">
          <tui-row justify="center">
            <tui-col :span="12">
              <view class="tui-col__demo tui-yellow">
                天盘局：
                <text class="text-panlei">
                  {{
                  baseInfo.mingju
                  }}
                </text>
              </view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">
                命主：
                <text class="text-zhu">
                  {{
                  baseInfo.mingzhu
                  }}
                </text>
              </view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-yellow">
                身主：
                <text class="text-zhu">
                  {{
                  baseInfo.shenzhu
                  }}
                </text>
              </view>
            </tui-col>
          </tui-row>

          <!-- <view>命宫在:{{ baseInfo.mingsihua }}</view>
          <view>身宫在化:{{ baseInfo.mingsihua }}</view>-->
        </view>

        <view class="img-item">
          <text></text>
          <tui-row justify="center">
            <tui-col :span="12">
              <view class="gan-zhi">{{ baseInfo.yeargz }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="gan-zhi">{{ baseInfo.monthgz }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="gan-zhi">{{ baseInfo.hourgz }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="gan-zhi">{{ baseInfo.hournayin }}</view>
            </tui-col>
          </tui-row>
        </view>

        <view class="img-item">
          纳音：
          <tui-row justify="center">
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">{{ baseInfo.yearnayin }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">{{ baseInfo.monthnayin }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">{{ baseInfo.daynayin }}</view>
            </tui-col>
            <tui-col :span="12">
              <view class="tui-col__demo tui-gray">{{ baseInfo.hournayin }}</view>
            </tui-col>
          </tui-row>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { yfgzwpanApi } from "@/apis/qiuqian.js";
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  data() {
    return {
      baseInfo: {},
      gongPan: []
    };
  },
  onLoad(option) {
    let baseFormData = JSON.parse(option.baseFormData); // 字符串转对象
    this.getDataInfo(baseFormData);
  },
  methods: {
    async getDataInfo(baseFormData) {
      let { code, data } = await yfgzwpanApi(baseFormData);
      if (code == 1) {
        this.gongPan = data.gongPan;
        this.baseInfo = data.baseInfo;
      }
    }
  }
};
</script>

<style lang="scss">
.ziwei-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #f6f6f6;
  position: relative;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 创建4列 */
    grid-template-rows: repeat(4, 1fr); /* 创建4行 */

    position: relative;
    font-size: 12px;
    padding: 10px 0px;

    .img {
      position: absolute;
      top: 160px;
      left: 25%;
      padding: 5px;
      .img-item {
        padding: 4px 0;
        display: flex;
        align-items: center;

        .gan-zhi {
          color: #f30;
          font-size: 14px;
        }
        .text-panlei {
          color: #f30;
          font-size: 14px;
        }
        .text-zhu {
          color: #67c23a;
          font-size: 14px;
        }
      }
    }
  }

  .grid-item {
    padding: 4px 4px;
    border-top: 1px solid #f5f6f7;
    border-left: 1px solid #f5f6f7;
    border-right: 1px solid #f5f6f7;
    border-bottom: 1px solid #f5f6f7;
    background: #fff;

    .item {
      height: 14px;
      line-height: 14px;

      .text-item {
        font-size: 10px;
        color: #333;
        margin-right: 4px;
      }
      .text-item-1 {
        color: #409eff;
        font-weight: 600;
      }
      .text-item-3 {
        background: #f30;
        padding: 0 2px;
        color: #fff;
      }
      .text-item-4 {
        color: #f30;
        font-weight: 600;
      }
      .text-item-5 {
        color: #409eff;
        font-weight: 500;
      }
    }
  }
}
</style>